<template>
  <div>
    <el-form :inline="true" :model="searchGood" class="demo-form-inline">
      <el-form-item label="商品名称">
        <el-input
            size="mini"
            v-model="searchGood.goodName"
            placeholder="请输入商品名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品规格">
        <el-input
            size="mini"
            v-model="searchGood.model"
            placeholder="请输入商品规格编号"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品单位">
        <el-input
            size="mini"
            v-model="searchGood.goodUnit"
            placeholder="请输入商品单位"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input
            size="mini"
            v-model="searchGood.goodDes"
            placeholder="请输入商品描述"
        ></el-input>
      </el-form-item>

      <el-form-item label="商品数量">
        <el-input
            size="mini"
            v-model="searchGood.goodNum"
            placeholder="请输入商品数量"
        ></el-input>
      </el-form-item>

      <el-form-item label="商品品牌" >
        <el-select  size="mini" v-model="searchGood.brdCode" placeholder="请选择" value-key="id" >
          <el-option
              v-for="item in brandList"
              :key="item.value"
              :label="item.brdName"
              :value="item.brdCode"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="商品类别" >
        <el-select size="mini" v-model="searchGood.typeCode" placeholder="请选择" value-key="id" >
          <el-option
              v-for="item in goodTypeList"
              :key="item.value"
              :label="item.typeName"
              :value="item.typeCode"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="商品供应商" >
        <el-select size="mini" v-model="searchGood.supCode" placeholder="请选择" value-key="id" >
          <el-option
              v-for="item in supplierList"
              :key="item.value"
              :label="item.supName"
              :value="item.supCode"
          />
        </el-select>
      </el-form-item>



      <el-form-item>
        <el-button size="small" type="primary" @click="page()">查询</el-button>
        <el-button size="small" type="info" @click="clearInfo2();page()">清空</el-button>
        <el-button
            size="small"
            type="primary"
            @click="dialogFormVisible = true; good={}"
        >+ 新增商品
        </el-button
        >
      </el-form-item>

    </el-form>


    <!-- 数据表格 -->
    <template>
      <el-table
          highlight-current-row
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 1124px"
      >
        <el-table-column type="index" width="100" label="序号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="goodCode" width="100" label="商品编号" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="goodName" width="100" label="商品名称" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="model" width="140" label="商品规格" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="goodUnit" width="140" label="商品单位" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="marPrice" width="140" label="市场价格" header-align="center"
                         align="center"></el-table-column>

        <el-table-column prop="selPrice" width="140" label="销售价格" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="costPrice" width="140" label="成本价格" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="goodImg" width="140" label="商品图片" header-align="center"
                         align="center">
          <template slot-scope="{ row }">
            <el-image style="width: auto; height: 50px; border: none; cursor: pointer" :src="row.goodImg"
                      alt=""></el-image>
          </template>
        </el-table-column>

        <el-table-column prop="goodDes" width="140" label="商品描述" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="goodNum" width="140" label="商品数量" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="typeCode" width="140" label="类别" header-align="center"
                         align="center">
          <template slot-scope="scope">
            {{ getGoodTypeName(scope.row.typeCode) }}
          </template>
        </el-table-column>
        <el-table-column prop="supCode" width="140" label="供应商" header-align="center"
                         align="center">
          <template slot-scope="scope">
            {{ getSupplierName(scope.row.supCode) }}
          </template>
        </el-table-column>
        <el-table-column prop="brdCode" width="140" label="品牌" header-align="center"
                         align="center">
          <template slot-scope="scope">
            {{ getBrandName(scope.row.brdCode) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="primary"
                plain
                @click="selectById(scope.row.goodCode)"
            >编辑
            </el-button>

            <el-button
                size="mini"
                type="danger"
                plain
                @click="deleteById(scope.row.goodCode)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 新增 -->
    <el-dialog title="商品信息" :visible.sync="dialogFormVisible">
      <el-form :model="good">
        <el-form-item label="商品代码" :label-width="formLabelWidth">
          <el-input v-model="good.goodCode" placeholder="请输入商品代码" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="good.goodName" placeholder="请输入商品名称" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="商品规格" :label-width="formLabelWidth">
          <el-input v-model="good.model" placeholder="请输入商品规格" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="商品单位" :label-width="formLabelWidth">
          <el-input v-model="good.goodUnit" placeholder="请输入商品规格编号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="市场价格" :label-width="formLabelWidth">
          <el-input v-model="good.marPrice" placeholder="请输入商品图片" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="销售价格" :label-width="formLabelWidth">
          <el-input v-model="good.selPrice" placeholder="请输入商品图片" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成本价格" :label-width="formLabelWidth">
          <el-input v-model="good.costPrice" placeholder="请输入商品图片" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8083/upload"
              name="image"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img  style="width: 400px; height: 100px; border: none; cursor: pointer" v-if="good.goodImg" :src="good.goodImg" class="avatar" alt="暂无" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>


        <el-form-item label="商品描述" :label-width="formLabelWidth">
          <el-input v-model="good.goodDes" placeholder="请输入商品图片" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" :label-width="formLabelWidth">
          <el-input v-model="good.goodNum" placeholder="请输入商品图片" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品品牌" :label-width="formLabelWidth">
          <el-select v-model="good.brdCode" placeholder="请选择" value-key="id" style="width:100%">
            <el-option
                v-for="item in brandList"
                :key="item.value"
                :label="item.brdName"
                :value="item.brdCode"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="商品类别" :label-width="formLabelWidth">
          <el-select v-model="good.typeCode" placeholder="请选择" value-key="id" style="width:100%">
            <el-option
                v-for="item in goodTypeList"
                :key="item.value"
                :label="item.typeName"
                :value="item.typeCode"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="商品供应商" :label-width="formLabelWidth">
          <el-select v-model="good.supCode" placeholder="请选择" value-key="id" style="width:100%">
            <el-option
                v-for="item in supplierList"
                :key="item.value"
                :label="item.supName"
                :value="item.supCode"
            />
          </el-select>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false;clearInfo()">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="商品信息" :visible.sync="dialogForm2Visible">
      <el-form :model="good">
        <el-form-item label="商品代码" :label-width="formLabelWidth">
          <el-input v-model="good.goodCode" placeholder="请输入商品代码" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="good.goodName" placeholder="请输入商品名称" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="商品规格" :label-width="formLabelWidth">
          <el-input v-model="good.model" placeholder="请输入商品规格" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="商品单位" :label-width="formLabelWidth">
          <el-input v-model="good.goodUnit" placeholder="请输入商品规格编号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="市场价格" :label-width="formLabelWidth">
          <el-input v-model="good.marPrice" placeholder="请输入商品图片" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="销售价格" :label-width="formLabelWidth">
          <el-input v-model="good.selPrice" placeholder="请输入商品图片" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成本价格" :label-width="formLabelWidth">
          <el-input v-model="good.costPrice" placeholder="请输入商品图片" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8083/upload"
              name="image"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img  style="width: 400px; height: 100px; border: none; cursor: pointer" v-if="good.goodImg" :src="good.goodImg" class="avatar" alt="暂无" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>


        <el-form-item label="商品描述" :label-width="formLabelWidth">
          <el-input v-model="good.goodDes" placeholder="请输入商品图片" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" :label-width="formLabelWidth">
          <el-input v-model="good.goodNum" placeholder="请输入商品图片" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品品牌" :label-width="formLabelWidth">
          <el-select v-model="good.brdCode" placeholder="请选择" value-key="id" style="width:100%">
            <el-option
                v-for="item in brandList"
                :key="item.value"
                :label="item.brdName"
                :value="item.brdCode"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="商品类别" :label-width="formLabelWidth">
          <el-select v-model="good.typeCode" placeholder="请选择" value-key="id" style="width:100%">
            <el-option
                v-for="item in goodTypeList"
                :key="item.value"
                :label="item.typeName"
                :value="item.typeCode"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="商品供应商" :label-width="formLabelWidth">
          <el-select v-model="good.supCode" placeholder="请选择" value-key="id" style="width:100%">
            <el-option
                v-for="item in supplierList"
                :key="item.value"
                :label="item.supName"
                :value="item.supCode"
            />
          </el-select>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm2Visible = false;clearInfo()">取 消</el-button>
        <el-button type="primary" @click="add2()">确 定</el-button>
      </div>
    </el-dialog>


    <br>
    <!--分页工具条-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :background="background"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
    </el-pagination>


  </div>
</template>

<script>
import {addGood} from "@/api/good";
import {changeGood} from "@/api/good";
import {deleteGood} from "@/api/good";
import {page} from "@/api/good";
import {getBrandList} from "@/api/brand"
import {getSupplierList} from "@/api/supplier"
import {getGoodTypeList} from "@/api/goodType"

export default {
  data() {
    return {
      background: true,
      // 每页显示的条数
      pageSize: 5,
      // 总记录数
      totalCount: 100,
      // 当前页码
      currentPage: 1,
      formLabelWidth: "120px",
      dialogFormVisible: false, //控制对话框是否可见
      dialogForm2Visible: false, //控制对话框是否可见
      good: {//新增和编辑
        goodName: "",
        model: "",
        goodUnit: "",
        marPrice: "",
        selPrice: "",
        costPrice: "",
        goodImg: "",
        goodDes: "",
        goodCode: "",
        brdCode: "",
        typeCode: "",
        supCode: "",
        goodNum: "",
      },
      searchGood: {//条件查询
        goodName: "",
        model: "",
        goodUnit: "",
        marPrice: "",
        selPrice: "",
        costPrice: "",
        goodImg: "",
        goodDes: "",
        goodCode: "",
        brdCode: "",
        typeCode: "",
        supCode: "",
        goodNum: "",
      },
      tableData: [],
      brandList: [],
      goodTypeList: [],
      supplierList:[],
    };
  },

  methods: {
    deleteById(id) {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteGood(id).then((res) => {
          if (res.data.code === 1) {
            this.$message.success("删除成功")
            this.page()
          }
        }).catch((e) => {
        })


      }).catch(() => {
        //用户点击取消按钮
        this.$message.info("已取消删除");
      });
    },

    selectById(id) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].goodCode === id) {
          this.good = this.tableData[i];
          break;
        }
      }
      this.dialogForm2Visible = true

    },
    clearInfo() {
      this.good = {
        goodName: "",
        model: "",
        goodUnit: "",
        marPrice: "",
        selPrice: "",
        costPrice: "",
        goodImg: "",
        goodDes: "",
        goodCode: "",
        brdCode: "",
        typeCode: "",
        supCode: "",
        goodNum: "",
      }
    },
    clearInfo2() {
      this.searchGood = {
        goodName: "",
        model: "",
        goodUnit: "",
        marPrice: "",
        selPrice: "",
        costPrice: "",
        goodImg: "",
        goodDes: "",
        goodCode: "",
        brdCode: "",
        typeCode: "",
        supCode: "",
        goodNum: "",
      }
    },
    add() {
      const {good} = this;
      if (!good.goodCode || !good.goodName || !good.model || !good.goodUnit) {
        this.$message("请完整填写");
      } else {
        addGood(this.good).then((res) => {
          if (res.data.code === 1) {
            this.$message.success("添加成功")
            this.dialogFormVisible = false
            this.clearInfo()
            this.page()
          }
        }).catch((e) => {
        })
      }

    },
    add2() {
      const {good} = this;
      if (!good.goodCode || !good.goodName || !good.model || !good.goodUnit) {
        this.$message("请完整填写");
      } else {
        changeGood(this.good).then((res) => {
          if (res.data.code === 1) {
            this.$message.success("修改成功")
            this.dialogForm2Visible = false
            this.clearInfo()
          }
        }).catch((e) => {
        })
      }

    },


    //分页
    handleSizeChange(val) {
      // 重新设置每页显示的条数
      this.pageSize = val;
      this.page();
    },
    handleCurrentChange(val) {
      // 重新设置当前页码
      this.currentPage = val;
      this.page();
    },
    getBrandLists() {
      getBrandList().then((res) => {
        this.brandList = res.data.data;
      }).catch((e) => {
      })
    },
    //查询对应的品牌名
    getBrandName(code) {
      const brand = this.brandList.find(b => b.brdCode === code);
      return brand ? brand.brdName : '未知品牌';
    },

    getSupplierLists() {
      getSupplierList().then((res) => {
        this.supplierList = res.data.data;
      }).catch((e) => {
      })
    },
    //查询对应的供应商
    getSupplierName(code) {
      const supplier = this.supplierList.find(b => b.supCode === code);
      return supplier ? supplier.supName : '未知供应商';
    },

    getGoodTypeLists() {
      getGoodTypeList().then((res) => {
        this.goodTypeList = res.data.data;
      }).catch((e) => {
      })
    },
    //查询对应的类别
    getGoodTypeName(code) {
      const goodType = this.goodTypeList.find(b => b.typeCode === code);
      return goodType ? goodType.typeName : '未知类别';
    },

    //文件上传相关
    handleAvatarSuccess(res, file) {
      this.good.goodImg = res.data;
      this.$forceUpdate()//纯nm
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type.startsWith("image/");
      const isLt2M = file.size / 1024 / 1024 < 100;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 查询分页数据
    page() {
      page(
          this.searchGood,
          this.currentPage,
          this.pageSize
      ).then((res) => {
        if (res.data.code != 0) {
          this.totalCount = res.data.data.total;
          this.tableData = res.data.data.rows;
        }
      }).catch((e) => {
      });
    },

  },
  mounted() {
    this.page()
    this.getBrandLists()
    this.getSupplierLists()
    this.getGoodTypeLists()
  },
};
</script>
<style>

</style>
